<template>
  <uni-popup v-if="scannedData" ref="popup" type="center">
	<view class="modal-overlay" @click.stop></view>
    <view class="modal-container">
      <!-- 显示基础字段 -->
          <view class="modal-content">
            <text class="title">扫描结果</text>
            
            <!-- 进仓单号 -->
            <input 
              v-model="props.scannedData.billNo" 
              placeholder="已自动填充单号" 
              disabled
            />
            
            <!-- 物料名称 -->
            <input 
              v-model="props.scannedData.goodsName" 
              placeholder="物料名称" 
              disabled
            />
            
            <!-- 设计编号-规格 -->
            <textarea 
              v-model="props.scannedData.designNumberVerSpec"
              placeholder="图号版本-规格"
              auto-height
            ></textarea>
        <input
          class="input"
          v-model="qty"
          type="number"
          placeholder="请输入单据数量"
        />
      </view>

      <!-- 操作按钮 -->
      <view class="modal-footer">
        <button class="btn cancel" @click="closeModal">取消</button>
        <button class="btn confirm" @click="handleConfirm">确认</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const popup = ref()
const scannedData = ref<any>({})
const qty = ref('')

interface ScannedData {
  planCode: string;
  billNo: string;
  goodsCode: string;
  goodsName: string;
  designNumberVerSpec: string,
  unitCode: string;
  workingAreaCode: string;
  wpNo: number;
  inQty: number;
  qty: number;
  remark: string;
}

const props = defineProps<{
  scannedData: ScannedData; // 接收父组件传递的整个对象
}>();

const openModal = (data: any) => {
  scannedData.value = data
  popup.value.show()
}

const closeModal = () => {
	console.log(props)
	console.log(props.scannedData)
	scannedData.value = null;
	popup.value.close()
}

const emit = defineEmits(['confirm'])

const handleConfirm = () => {
	if (!qty.value) {
		uni.showToast({ title: '请输入数量', icon: 'none' })
		return
	}
	emit('confirm', {
		...scannedData.value,
		qty: Number(qty.value)
	})
    closeModal()
}

defineExpose({ openModal });
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色 */
  z-index: 1000; /* 确保遮罩层在最底层 */
}

.modal-container {
  position: relative;
  z-index: 1001; /* 弹窗内容在遮罩层之上 */
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  max-width: 80vw; /* 控制弹窗最大宽度 */
  margin: 0 auto; /* 居中 */
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
}

.close-btn {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.cancel {
  background: #f0f0f0;
  color: #333;
  margin-right: 20rpx;
}

.confirm {
  background: #007aff;
  color: white;
}
</style>